<template>
  <div class="layers-panel">
    <div class="panel-header">
      <van-cell title="图层" center>
        <template #right-icon>
          <van-button size="mini" type="primary" icon="plus" plain @click="addNewLayer">
            添加
          </van-button>
        </template>
      </van-cell>
    </div>
    
    <div class="layers-list">
      <van-empty v-if="sortedElements.length === 0" description="暂无图层" />
      
      <van-cell-group inset v-else>
        <van-swipe-cell 
          v-for="element in sortedElements" 
          :key="element.id"
          :class="{ 'selected-layer': isSelected(element.id) }"
        >
          <template #right>
            <van-button 
              square 
              type="danger" 
              text="删除" 
              class="delete-button" 
              @click="deleteLayer(element.id)" 
            />
          </template>
          
          <van-cell :class="{ 'locked-layer': element.isLocked }">
            <template #icon>
              <van-icon :name="getElementIconName(element.type)" class="layer-icon" />
            </template>
            
            <template #title>
              <div class="layer-title" @click="selectLayer(element.id)">
                {{ getElementName(element) }}
              </div>
            </template>
            
            <template #right-icon>
              <div class="layer-controls">
                <van-button 
                  size="mini" 
                  :icon="element.isVisible ? 'eye-o' : 'closed-eye'" 
                  plain
                  @click.stop="toggleVisibility(element.id)"
                />
                <van-button 
                  size="mini" 
                  :icon="element.isLocked ? 'lock' : 'passed'" 
                  plain
                  @click.stop="toggleLock(element.id)"
                />
              </div>
            </template>
          </van-cell>
        </van-swipe-cell>
      </van-cell-group>
    </div>
    
    <div class="panel-footer">
      <van-button-group>
        <van-button icon="arrow-up" size="small" @click="moveLayerUp" :disabled="!hasSelection">上移</van-button>
        <van-button icon="arrow-down" size="small" @click="moveLayerDown" :disabled="!hasSelection">下移</van-button>
      </van-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useEditorStore, useElementsStore } from '@/stores';
import { eventBus } from '@/utils/eventBus';
import type { ElementType } from '@/types';

const editorStore = useEditorStore();
const elementsStore = useElementsStore();

// 计算属性
const sortedElements = computed(() => elementsStore.sortedElements);
const hasSelection = computed(() => editorStore.hasSelection);
const activeElementId = computed(() => editorStore.selection.activeElementId);

// 方法
function isSelected(elementId: string): boolean {
  return editorStore.selection.selectedElementIds.includes(elementId);
}

function selectLayer(elementId: string) {
  editorStore.selectElement(elementId);
  eventBus.emit('layer:selected', { elementId });
}

function toggleVisibility(elementId: string) {
  const element = elementsStore.getElementById(elementId);
  if (element) {
    if (element.isVisible) {
      elementsStore.hideElement(elementId);
    } else {
      elementsStore.showElement(elementId);
    }
    eventBus.emit('layer:visibility-changed', { elementId, visible: !element.isVisible });
  }
}

function toggleLock(elementId: string) {
  const element = elementsStore.getElementById(elementId);
  if (element) {
    if (element.isLocked) {
      elementsStore.unlockElement(elementId);
    } else {
      elementsStore.lockElement(elementId);
    }
    eventBus.emit('layer:lock-changed', { elementId, locked: !element.isLocked });
  }
}

function deleteLayer(elementId: string) {
  eventBus.emit('toolbar:action', {
    action: 'delete',
    elementId: elementId
  });
}

function addNewLayer() {
  eventBus.emit('toolbar:action', {
    action: 'add-layer'
  });
}

function moveLayerUp() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'move-layer-up',
      elementId: activeElementId.value
    });
  }
}

function moveLayerDown() {
  if (activeElementId.value) {
    eventBus.emit('toolbar:action', {
      action: 'move-layer-down',
      elementId: activeElementId.value
    });
  }
}

function getElementIconName(type: ElementType): string {
  switch (type) {
    case 'text': return 'edit';
    case 'image': return 'photo-o';
    case 'shape': return 'gem-o';
    case 'group': return 'cluster-o';
    case 'sticker': return 'label-o';
    case 'illustration': return 'brush-o';
    case 'template': return 'description';
    default: return 'question-o';
  }
}

function getElementName(element: any): string {
  if (element.name) return element.name;
  
  switch (element.type) {
    case 'text': return '文本';
    case 'image': return '图片';
    case 'shape': return '形状';
    case 'group': return '组合';
    case 'sticker': return '贴纸';
    case 'illustration': return '插画';
    case 'template': return '模板';
    default: return '未知元素';
  }
}
</script>

<style scoped>
.layers-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-color);
}

.panel-header {
  border-bottom: 1px solid var(--border-color);
}

.layers-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.panel-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}

.layer-icon {
  margin-right: 8px;
  font-size: 18px;
}

.layer-title {
  cursor: pointer;
  padding: 4px 0;
}

.layer-controls {
  display: flex;
  gap: 4px;
}

.selected-layer {
  background-color: var(--primary-color-light);
}

.locked-layer {
  opacity: 0.7;
}

.delete-button {
  height: 100%;
}

/* 暗色主题样式 */
:deep(.dark-theme) .selected-layer {
  background-color: var(--dark-primary-color-dark);
}
</style>